import React, { useState, useEffect } from 'react'
import './index.css'
import { Route, Switch, withRouter } from 'react-router-dom'

import { Layout, Menu } from '@arco-design/web-react'
import Logo from './npe-logo.gif'
// import Logo from './npe-logo-image.png'
import Home from './Home'
import Knowledge from './Knowledge'
import Community from './Community'
import Other from './Other'
import { useDocumentTitle } from './tool'

const MenuItem = Menu.Item
const Header = Layout.Header
const Content = Layout.Content

// NPE项目入口
const Npe = (props) => {
  useDocumentTitle('NullPointerException')

  useEffect(() => {
    console.log('props.history', props.history)
  }, [props])

  // 路径判断
  const getPath = () => {
    const path = props.history.location.pathname
    if (path) {
      let keys = path.split('/')
      console.log('keys', keys)
      if (keys.length === 2) {
        return path
      } else if (keys.length > 2) {
        return '/' + keys[1] + '/' + keys[2]
      }
    }
  }

  return (
    <Layout className='npe'>
      {/* 头部 */}
      <Header className='npe-header'>
        <div className='menu-demo'>
          <Menu
            mode='horizontal'
            selectedKeys={[getPath()]}
            defaultSelectedKeys={['/npe']}
            onClickMenuItem={(key) => props.history.push(key)}
          >
            <MenuItem key='0' style={{ padding: 0, marginLeft: 50, marginRight: 20 }} disabled>
              <div
                onClick={() => props.history.push('/npe')}
                style={{
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#333333',
                  width: 250,
                  height: 30,
                  borderRadius: 2,
                  cursor: 'pointer',
                }}
              >
                <img height={58} style={{ marginTop: -15 }} src={Logo} alt='npe-logo'></img>
              </div>
            </MenuItem>
            <MenuItem key='/npe'>首页</MenuItem>
            <MenuItem key='/npe/knowledge'>知识星球</MenuItem>
            <MenuItem key='/npe/community'>问答社区</MenuItem>
            <MenuItem key='/npe/other'>其他</MenuItem>
          </Menu>
        </div>
      </Header>
      <Layout className={'npe-layout'}>
        <Content>
          <Switch>
            <Route path='/npe/knowledge' exact component={Knowledge}></Route>
            <Route path='/npe/community' component={Community}></Route>
            <Route path='/npe/other' exact component={Other}></Route>
            <Route path='/npe' component={Home}></Route>
          </Switch>
        </Content>
        {/* <Footer>YNTX-NPE ©2022 Created by 与你同行</Footer> */}
      </Layout>
    </Layout>
  )
}

export default withRouter(Npe)
